<html> 
 <head>
	<title>AmazonS3 Upload With only JavaScript</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="functions.js"></script>
	<script src="prototype.js"></script>
	<style>
		span {font-weight:bold;}
	</style>
	<script>
		function init(){
		var time = "2075-12-27T00:42:10Z";
		var normalkey = Get_Cookie("AWSAccessKeyId");
		var secretkey = Get_Cookie("AWSsecretkey");;
		var success = location.protocol + "//" + location.hostname+location.pathname + "?success";
		var acl = "private"; //public-read
		var bucket = Get_Cookie('bucket');
		var path = Get_Cookie('folder');
			
		var policy = Base64.encode("{'expiration': '"+time+"',  'conditions': [     {'bucket': '"+bucket+"'},     ['starts-with', '$key', '"+path+"'],    {'acl': '"+acl+"'},    {'success_action_redirect': '"+success+"'},    ['starts-with', '$Content-Type', ''],    ['content-length-range', 0, "+(1024*1024*10)+"] ]}");
		var signature = b64_hmac_sha1(secretkey,policy);
			$('key').value=path + Get_Cookie('filename');
			$('AWSAccessKeyId').value=normalkey;
			$('acl').value=acl;
			$('success_action_redirect').value=success;
			$('policy').value=policy;
			$('signature').value=signature;
			$('frm').action="https://"+bucket+".s3.amazonaws.com/";
		if(querySt('bucket') != undefined){
			var d = new Date; 
			var unixtime = parseInt(d.getTime() / 1000);

			time = unixtime + 60*60*24*7; // +7 days from now
			var strtosign = "GET\n\n\n"+time+"\n/"+querySt('bucket')+"/"+URLDecode(querySt('key'));
			signature = URLEncode(b64_hmac_sha1(secretkey,strtosign));
			var url = "https://"+querySt('bucket')+".s3.amazonaws.com/"+URLDecode(querySt('key'))+"?AWSAccessKeyId="+normalkey+"&Expires="+time+"&Signature="+signature;
			$("url").update("File you just uploaded : <a href='"+url+"'>"+url+"</a>");
		}
	}
	
	function userset(what, towhat, loading){
		Set_Cookie(what, towhat);
		if(what != "AWSsecretkey"){
			if(what != "folder")
				$('current_'+what).update(Get_Cookie(what));
				else{
					if(Get_Cookie(what) == "")
						$('current_'+what).update("-- ROOT --");
						else
						$('current_'+what).update(Get_Cookie(what));

						
				}
				
			}
		else
			$('current_'+what).update("*** hidden ***");
		if(!loading) init();
	}

	function change(what){
		v = prompt(what, Get_Cookie(what))
		if(v != "" && v != null || what == "folder" && v == ""){
			userset(what, v);
		}
		
	}
	function onloadref(){
		if(Get_Cookie('AWSAccessKeyId') != null)
				$("current_AWSAccessKeyId").update(Get_Cookie('AWSAccessKeyId'));
			else
				userset('AWSAccessKeyId', "default", true);

		if(Get_Cookie('bucket') != null)
				$("current_bucket").update(Get_Cookie('bucket'));
			else
				userset('bucket', "default", true);
		if(Get_Cookie('folder') != null){

					if(Get_Cookie('folder') == "")
						$('current_folder').update("-- ROOT --");					
						else
						$("current_folder").update(Get_Cookie('folder'));
				}
			else
				userset('folder', "javascript/", true);

		if(Get_Cookie('filename') != null)
			$("current_filename").update(Get_Cookie('filename'));
			else
				userset('filename', "${filename}", true);

	}
	
	function deletecookies(){
		Delete_Cookie("AWSAccessKeyId");
		Delete_Cookie("AWSsecretkey");
		Delete_Cookie("bucket");
		Delete_Cookie("folder");
		Delete_Cookie("filename");
		location.href = location.href;
	}
	</script>
  </head>
  <body onload="onloadref();init();"> 
<pre>
   AWSAccessKeyId : <a href="javascript:void(0);" onclick="javascript:change('AWSAccessKeyId')"><span id="current_AWSAccessKeyId">null</span></a>
     AWSsecretkey : <a href="javascript:void(0);" onclick="javascript:change('AWSsecretkey')"><span id="current_AWSsecretkey">*** hidden ***</span></a> <a href="javascript:void();" onclick="Delete_Cookie('AWSsecretkey');"><b>Destroy!</b></a>
           bucket : <a href="javascript:void(0);" onclick="javascript:change('bucket')"><span id="current_bucket">null</span></a>
           folder : <a href="javascript:void(0);" onclick="javascript:change('folder')"><span id="current_folder">javascript/</span></a>     * leave blank for root directory AND if not, / goes to END!!!
         filename : <a href="javascript:void(0);" onclick="javascript:change('filename')"><span id="current_filename">${filename}</span></a>     * leave ${filename} for same as on your local system
</pre>
	
      <form id="frm" action="" method="post" enctype="multipart/form-data">
      <input type="hidden" id="key" name="key" value="${filename}">
      <input type="hidden" id="AWSAccessKeyId" name="AWSAccessKeyId" value=""> 
      <input type="hidden" id="acl" name="acl" value="private"> 
      <input type="hidden" id="success_action_redirect" name="success_action_redirect" value="">
      <input type="hidden" id="policy" name="policy" value="">
      <input type="hidden" id="signature" name="signature" value="">
      <input type="hidden" name="Content-Type" value="">
      <input name="file" type="file"> 
      <input type="submit" value="Upload File to S3"> 
    </form>
	 
	 <div id="url"></div>
<br /><br /><button onclick="deletecookies()">Delete cookies</button>
<br /><br />
<small>11 aug. 2008 \\// <a href="mailto:tanel@tanelpuhu.com">tanel@tanelpuhu.com</a> \\// <a href="http://code.google.com/p/s3jsupload/">Source</a></small>
</body>
</html>

